<script lang="ts" setup>
import { ref } from 'vue'

export interface TabItem {
  label: string
}

defineProps<{
  data: TabItem[]
}>()

const emit = defineEmits<{
  change: [active: number]
}>()

const activeIndex = ref(0)
const changeTab = (index: number) => {
  activeIndex.value = index
  emit('change', index)
}
</script>

<template>
  <view class="custom-tabs">
    <view
      class="custom-tabs-bar"
      v-for="(item, index) in data"
      :key="index"
      :class="{ active: index === activeIndex }"
      @click="changeTab(index)"
    >
      <text class="tabbar-text">{{ item.label }}</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
// 自定义tabbar
.custom-tabs {
  display: flex;
  position: relative;
  padding: 0 30rpx;
}

.custom-tabs-bar {
  height: 80rpx;
  line-height: 80rpx;
  color: #979797;
  margin-right: 30rpx;
  position: relative;

  &.active {
    color: #121826;
    font-weight: 500;
    border-bottom: 2px solid #2cb5a5;
  }
}

.tabbar-text {
  font-size: 30rpx;
}

.custom-tabs-cursor {
  position: absolute;
  bottom: 3px;
  left: 20px;

  width: 20px;
  height: 2px;
  border-radius: 2px;
  background-color: #2cb5a5;
  transition: all 0.3s ease-out;
}
</style>